<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      position: relative;
    }

    #liu {
      width: 150px;
      height: 60px;
      font-size: 30px;
      background: aqua;
      border-radius: 25px;
    }

    #ge {
      width: 800px;
      height: 500px;
      background: #38ff00;
      margin-top: 30px;
    }

    #lie {
      width: 400px;
      height: 440px;
      border: 1px solid #000;
      background-color: aqua;
      text-align: center;
      position: absolute;
      top: 50px;
      left: 500px;
      display: none;
    }

    p {
      font-size: 20px;
    }

    input {
      height: 25px;
    }

    #guan {
      width: 90px;
      height: 35px;
      border-radius: 10px;
      margin-left: 200px;
    }

    #fa {
      width: 90px;
      height: 35px;
      border-radius: 10px;
    }

    tr {
      border-bottom: 1px solid #000;
    }

    td {
      text-align: center;
    }
  </style>

  <body>
    <button id="liu">我要留言</button>
    <div id="lie">
      <h2>发布留言</h2>
      <hr />
      <p>留言标题:</p>
      <input type="text" id="ti" />
      <p>留言人:</p>
      <input type="text" id="ren" />
      <p>留言内容:</p>
      <input type="text" id="rong" />
      <hr />
      <button id="guan">关闭</button> <button id="fa">发布</button>
    </div>

    <div id="ge">
      <table border="1" style="width: 800px">
        <thead>
          <tr>
            <th>lD</th>
            <th>标题</th>
            <th>留言人</th>
            <th>内容</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="ed"></tbody>
      </table>
    </div>
  </body>
  <script>
    window.onload = function () {
      liu.onclick = function () {
        document.getElementById("lie").style.display = "block"
        
        guan.onclick = function () {
          document.getElementById("lie").style.display = "none"
        }
        
        fa.onclick = function () {
          var tiobj = ti.value,
              renobj = ren.value,
              rongobj = rong.value,
            s = new XMLHttpRequest();
          if (tiobj == "" || renobj == "" || rongobj == "") {
            alert("不能为空")
            return
          }
          s.open(
            "POST", 
            "https://liu.zzgoodqc.cn/lyb/add",true
          )
          s.setRequestHeader(
            "content-type",
            "application/x-www-form-urlencoded"
          );
          s.onreadystatechange = function () {
            if (s.readyState == 4 && s.status == 200) {
              var e = JSON.parse(s.responseText);
              if (confirm("你确定要发布吗？")) {
                if (e.code == 200) {
                  alert("已成功发布");
                  document.getElementById("lie").style = "display: none;"
                  fun()
                } else {
                  alert("发布失败")
                }
              }
            }
          }
          var sd = `name=${tiobj}&title=${renobj}&content=${rongobj}`
          s.send(sd)
        }
      }
    }

      function fun() {
        var w = new XMLHttpRequest()
        w.onreadystatechange = function () {
            if (w.readyState == 4 && w.status == 200) {
                var m1 = JSON.parse(w.responseText)
                var h2 = ''
                for (var j in m1.data) {
                    h2 += `<tr>
                    <td>${m1.data[j].id}</td>
                    <td>${m1.data[j].name}</td>
                    <td>${m1.data[j].title}</td>
                    <td>${m1.data[j].content}</td>
                    <td>${m1.data[j].updated_at}</td>
                    <td><button onclick = 'age(${m1.data[j].id})'>删除</button></td>
                    </tr>`
                }
                document.getElementById('ed').innerHTML = h2
            }
        }
        w.open(
          'GET', 
          'https://liu.zzgoodqc.cn/lyb', true
        )
        w.send()
    }
    fun()
    function age(jd) {
        var com = new XMLHttpRequest()
        com.open(
          'GET', 
          'https://liu.zzgoodqc.cn/del/' + jd, true
        )
        com.send()
        fun()
    }
    
  </script>
</html>
